<template>
  <div>

    <router-link to="/OnlineCourseHome">返回</router-link>
    <h1>{{module.name}}</h1>
    <div>
      <div>
        <el-button type="text" :class="{ 'active': module.currentPage === 'b' }" @click="showPage( module,'b')">添加视频</el-button>
        <el-button type="text" :class="{ 'active': module.currentPage === 'c' }" @click="showPage( module,'c')">添加资料</el-button>
      </div>

      <!-- b -->
      <div v-if="module.currentPage === 'b'">
        <label for="resources">选择视频：</label>
        <form @submit.prevent="addResource(module, selectedResourceId)">
          <select class="xialakuang" v-model="selectedResourceId">
            <option v-for="(resource, index) in resources" :key="index" :value="resource">{{ resource.resource_name }}</option>
          </select>
          <button type="submit">发布视频</button>
        </form>

        <el-divider></el-divider>
        <h2>已添加的视频</h2>
        <el-table :data="module.videos" style="width: 100%">
          <el-table-column prop="name" label="资料名称"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="deleteVideo(module, row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- c -->
      <div v-if="module.currentPage === 'c'">
        <label for="resources">选择资料：</label>
        <form @submit.prevent="addResource(module, selectedResourceId)">
          <select class="xialakuang" v-model="selectedResourceId">
            <option v-for="(resource, index) in resources" :key="index" :value="resource">{{ resource.resource_name }}</option>
          </select>
          <button type="submit">发布资料</button>
        </form>
        
        <el-divider></el-divider>
        <h2>已添加的资料</h2>
        <el-table :data="module.information" style="width: 100%">
          <el-table-column prop="name" label="资料名称"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="deleteMaterial(module, row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'NewEditCourse',
  data() {
    return {
      module: {
        id:this.$route.params.id,
        name:'jjj',
        currentPage: 'b',
        videos: [
          { name: '视频教程1', duration: '10:30' },
          { name: '视频教程2', duration: '15:00' }
        ],
        information: [
          { name: '资料1', type: 'PDF' },
          { name: '资料2', type: 'Word' }
        ],
      },
      resources: [
        // { resource_name: '视频教程1', id: 1 },
        // { resource_name: '视频教程2', id: 2 },
        // { resource_name: '资料1', id: 3 },
        // { resource_name: '资料2', id: 4 }
      ],
      selectedResourceId: null,
    };
  },
  mounted() {
    // 从路由参数中获取 `name` 并设置到组件的数据中
    this.module.name = this.$route.params.name
    this.showPage(this.module,this.module.page)
  },
  methods: {
    showPage(module,page) {
      module.currentPage = page;

      console.log('当前选择的小节id',module)
      // this.fetchVideos();
      if(page=='b') {
        this.fetchVideos();//下拉框显示视频
        // 获得已发布的视频
              this.fetchMaterialList(module,"video");
      }

      if(page=='c') {
        this.fetchResources();//下拉框显示资料
        // 获得已发布的资料
              this.fetchMaterialList(module,"ppt");
      }
  },

   // 获取视频库视频到下拉列表
   fetchVideos() {
      const courseId = 1; // 假设当前课程的ID为1，根据实际情况修改
      axios.get(`http://8.138.12.59:1999/resources/showvideos?course_id=${courseId}`) 
        .then(response => {
          this.resources = response.data.data; // 假设后端返回的数据是一个包含资料对象的数组
          console.log('获取视频库视频到下拉列表成功：',response.data.data[1]);
        })
        .catch(error => {
          console.error('获取课程视频失败', error);
        });
    },

    // // 获取资料库资料到下拉列表
    fetchResources() {
      const courseId = 1; // 假设当前课程的ID为1，根据实际情况修改
      axios.get(`http://8.138.12.59:1999/resources/showppts?course_id=${courseId}`) 
        .then(response => {
          this.resources = response.data.data; // 假设后端返回的数据是一个包含资料对象的数组
          console.log('获取资料库资料到下拉列表成功：',response.data.data[1]);
        })
        .catch(error => {
          console.error('获取课程资料失败', error);
        });
    },

  // 发布视频、资料到单元上
  addResource(module, resource) {
      // 获取当前单元选择的资料ID
      console.log('当前单元id', module.id, '当前选择资料id', resource.resource_id);
      if (!resource) {
        console.error('请选择一个资料');
        return;
      }
      // 发送请求将资料ID与当前单元的unit_id关联
      const data = {
        unit_id: module.id,
        resource_id: resource.resource_id
      };
      axios.post('http://8.138.12.59:1999/unit/setUnit/addResource', data)
        .then(response => {
          console.log('资料添加成功', response.data);
          // 发布成功回调，在列表里更新已发布的数据
          this.fetchMaterialList(module, 'ppt');
          this.fetchMaterialList(module, 'video');
        })
        .catch(error => {
          console.error('资料添加失败', error);
        });
      console.log('选择的资源 ID:', resource.resource_id);
      this.selectedResourceId = null;
    },

    // 从数据库得到当前单元下已发布的资料（视频、资料）
    fetchMaterialList(module,Type) {
      // const unitId = id; // 当前单元的 ID
      const resourceType = Type; // 资料类型，可以根据实际需要修改
      console.log('显示资料成功:',module)
      axios.get(`http://8.138.12.59:1999/unit/showUnitResouList`,{
        params:{
          unit_id:module.id,
          resource_type:resourceType
        }
      })
        .then(response => {
          if (response.data.status === 1) {
            if(Type=="ppt"){//显示资料
              // console.log('显示资料成功:',module)
              // 数据获取成功
            // const module = this.modules.find(mod => mod.id === unitId);
            module.information = response.data.data.map(material => ({
              name: material.resource_name, // 假设后端返回的资料名称字段为 resource_name
              id: material.resource_id, // 假设后端返回的资料 ID 字段为 resource_id
            }));
            }
            else{//显示视频
              console.log('显示视频成功')
            //   const module = this.modules.find(mod => mod.id === unitId);
            module.videos = response.data.data.map(material => ({
              name: material.resource_name, // 假设后端返回的资料名称字段为 resource_name
              id: material.resource_id, // 假设后端返回的资料 ID 字段为 resource_id
            }));
            }
          } else {
            console.error('获取资料列表失败');
          }
        })
        .catch(error => {
          console.error('获取资料列表失败', error);
        });
    },

    // 删除视频
    deleteVideo(module, material) {
      this.$confirm('确定删除该视频吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定执行删除操作
        this.DeleteVideo(module, material); // 调用删除数据库的方法
        const index = this.videos.indexOf(material);
        if (index !== -1) {
          module.videos.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(() => {
        // 用户点击取消，无需操作
      });
    },
    DeleteVideo(module, material) {
      // 假设这里有一个后端接口或方法来删除数据库中的资料记录
      // 示例：使用 axios 发起 DELETE 请求
      console.log('模块id',module.id,'资源',material.id);
      axios.delete('http://8.138.12.59:1999/unit/deleteUnitResource', {
  data: {
    unit_id: module.id,
    resource_id: material.id
  }
})
        .then(response => {
          if (response.data.status === 1) {
            const index = module.videos.indexOf(material);
            if (index !== -1) {
              module.videos.splice(index, 1); // 从列表中移除该资料
              console.log('删除视频成功');
            }
          } else {
            console.error('删除视频失败');
          }
        })
        .catch(error => {
          console.error('删除视频失败1', error);
        });
    },

    // 删除资料
    deleteMaterial(module, material) {
      this.$confirm('确定删除该资料吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定执行删除操作
        this.removeFromDatabase(module, material); // 调用删除数据库的方法
        const index = this.information.indexOf(material);
        if (index !== -1) {
          module.information.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(() => {
        // 用户点击取消，无需操作
      });
    },
    // 后端
    removeFromDatabase(module, material) {
      // 假设这里有一个后端接口或方法来删除数据库中的资料记录
      // 示例：使用 axios 发起 DELETE 请求
      console.log('模块id',module.id,'资源',material.id);
      axios.delete('http://8.138.12.59:1999/unit/deleteUnitResource', {
  data: {
    unit_id: module.id,
    resource_id: material.id
  }
})
        .then(response => {
          if (response.data.status === 1) {
            const index = module.information.indexOf(material);
            if (index !== -1) {
              module.information.splice(index, 1); // 从列表中移除该资料
              console.log('删除资料成功');
            }
          } else {
            console.error('删除资料失败');
          }
        })
        .catch(error => {
          console.error('删除资料失败1', error);
        });
    },
  }
}
</script>

<style scoped>
.xialakuang{
  font-size: larger;
    padding: 7px;
    margin: 5px;
    background: #ffffff;
    /* border: 3px solid #949494; */
    color: #474747;
}
.btn{
  margin-left: 10px;
  color: #999999;
  border: none;
  background-color: rgba(255, 255, 255, 0.5); /* 白色背景，透明度为50% */
  font-weight: bold;
  font-size:small;
}
.label-upload:hover {
  cursor: pointer;
  color: blue; /* 或者你喜欢的颜色 */
}
.form-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

.form-list li {
  margin-bottom: 15px;
  flex: 0 0 calc(50% - 10px); /* 计算每个列表项的宽度，50% 减去一定的间隔 */
  max-width: calc(50% - 10px); /* 设置每个列表项的最大宽度 */
  box-sizing: border-box;
  padding-right: 10px; /* 右侧间隔 */
}

.form-list label {
  display: block;
  margin: 5px;
  color: #484848;
}

.form-list input[type="text"],
.form-list textarea,
.form-list input[type="datetime-local"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  color: #6c6c6c;
}

.form-list textarea {
  resize: vertical;
}

button[type="submit"] {
  background-color: #2a99ee;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"]:hover {
  background-color: #216fd4;
}

.biaoti{
  padding: 10px;
  border-bottom: 1px solid #b7b7b7;
  font-weight: bold; /* 将标题加粗 */
  font-size: larger;
}
.time {
  margin-left: 20px;
  color: #cfcfcf;
  font-size: 14px;
}
.active {
  color: rgb(109, 109, 255); /* 按钮a对应页面时字体颜色为蓝色 */
}
.hui{
  color: #afafaf;
  font-size: small;
}
.course-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 8px 16px;
  z-index: 1; /* 确保按钮在内容上方显示 */
}

.tab.active {
border-bottom: 2px solid #007bff;
color: #007bff;
animation: tabAnimation 2s infinite;
}
.tab {
padding: 10px 20px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.animated-tab {
animation: tabTextAnimation 2s infinite;
}
.tab-bar {
display: flex;
background-color: white;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 20px;
}
.online-course {
  position: relative;
padding: 20px;
background: linear-gradient(to right, #ffffff, #f0f0f0);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
/* max-width: 800px; */
width: 90%;
margin: 20px auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}



h2 {
color: #409EFF;
text-align: center;
margin-bottom: 20px;
font-size: 24px;
animation: slideIn 0.5s ease;
}

.el-table {
margin-bottom: 20px;
}

.el-button {
margin-top: 20px;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.el-button:hover {
background-color: #66b1ff;
transform: scale(1.05);
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

</style>